import { TreeFZBox, TreeFZItemBox, TreeTitleBox, TreeUlBox } from "./style";
import { FC, useEffect, useState } from "react";
import { ISyhtMenuGetMenuAllTree } from "../../../../../type/ConfigManagement/MenuPage/api";
import AddChangeModule from "../AddChangeModule";
import { ISelectTreeProps } from "../../../../../type/components";
import PitModal from '../../../../../components/PitModal'; //删除弹窗
import { getSyhtMenuDeleteMenu } from "../../../../../api/ConfigManagement/menuPageApi";

const TreeFZ: FC<{
    treeData: ISyhtMenuGetMenuAllTree[];
    setTreeData: React.Dispatch<React.SetStateAction<ISyhtMenuGetMenuAllTree[]>>,
    searchValue: string; // 检索关键字
    treeFun: () => void; // 树形图数据
}> = ({
    treeData,
    searchValue,
    setTreeData,
    treeFun
}) => {
        const [addChangeShow, setAddChangeShow] = useState(false); // 弹窗显示隐藏
        const [selectTreeList, setSelectTreeList] = useState<ISelectTreeProps[]>([]); // 选中的树状图数据.
        const [shangjiId, setShangjiId] = useState<string>(); // 父级ID
        const [changeData, setChangeData] = useState<ISyhtMenuGetMenuAllTree>(); // 修改的数据
        const [deleteMoudleShow, setDeleteMoudleShow] = useState(false); // 删除弹窗显示隐藏
        const [deleteId, setDeleteId] = useState<string>(); // 删除ID

        useEffect(() => {
            let list: ISelectTreeProps[] = []
            // 遍历树形结构， 复制一个新的树形结构
            const loop = (data: ISyhtMenuGetMenuAllTree[], arr: ISelectTreeProps[]) => {
                data.forEach((item) => {
                    let tepData: ISelectTreeProps = {
                        value: item.menuId,
                        label: item.menuName,
                        show: true, // 控制显示隐藏
                    }
                    if (item.children && item.children.length > 0) {
                        tepData.children = [];
                        loop(item.children, tepData.children)
                    }
                    arr.push(tepData)
                })
            }
            loop(treeData, list);
            setSelectTreeList(list);

            return () => {
            }
        }, [treeData])


        // 点击展开收缩
        const handleClickOpenClose = (key: string) => {
            const newTreeData = [...treeData]
            const loop = (data: ISyhtMenuGetMenuAllTree[]) => {
                data.forEach((item) => {
                    if (item.menuId === key) {
                        item.show = !item.show;
                    } else {
                        if (item.children) {
                            loop(item.children)
                        }
                    }
                })
            }
            loop(newTreeData)
            setTreeData(newTreeData)
        }

        // 新增修改模块关闭回调
        const handleAddChangeModuleClose = () => {
            setShangjiId('');
            setChangeData(undefined);
            setAddChangeShow(false);
            treeFun();
        }
        // 弹窗新增窗口，并传入父菜单ID
        const handleAdd = (item: ISyhtMenuGetMenuAllTree) => {
            setAddChangeShow(true);
            setShangjiId(item.menuId);
        }
        // 弹窗修改窗口，并传入列表数据
        const handleChange = (item: ISyhtMenuGetMenuAllTree) => {
            setAddChangeShow(true);
            setChangeData(item);
        }
        // 删除
        const handleDelete = (item: ISyhtMenuGetMenuAllTree) => {
            setDeleteMoudleShow(true);
            setDeleteId(item.menuId);
        }
        //  删除回调
        const handleDeleteCallback = async (type: 'ok' | 'cancel') => {
            if (type === 'ok') {
                if (deleteId) {
                    const { code, msg } = await getSyhtMenuDeleteMenu({ menuId: deleteId }) as { code: number, msg: string }; // 删除菜单
                    if (code === 200) {
                        alert('菜单删除成功')
                        setDeleteMoudleShow(false); // 关闭弹窗
                        setDeleteId(''); // 清空ID
                        treeFun(); // 重新获取树形图数据  
                    } else {
                        alert(msg)
                    }
                }
            } else {
            }
        }


        const handleXunhuanHTML = (listData: ISyhtMenuGetMenuAllTree[], level = 0) => {
            level++;
            return <>
                {
                    listData.map((item) => <TreeFZItemBox key={item.menuId} >
                        <TreeTitleBox youyi={level - 1}>
                            {/* 新增 */}
                            <span className="iconfont add_box" onClick={() => handleAdd(item)}>&#xe6f4;</span>
                            {
                                (item.children && item.children.length > 0)
                                    ? <span
                                        className={item.show ? 'iconfont jiedian icon_xuanzhuan' : 'iconfont jiedian'}
                                        onClick={() => handleClickOpenClose(item.menuId)}>
                                        &#xe626;
                                    </span>
                                    :
                                    <span className={item.show ? 'iconfont jiedian icon_xuanzhuan' : 'iconfont jiedian'}
                                    >

                                    </span>
                            }

                            <div className={item.menuName.includes(searchValue) ? "tree_name_box name_color" : "tree_name_box"} >{item.menuName}</div>
                            <div className="terr_type_box">{item.menuType === 'C' ? '菜单' : '按钮'}</div>
                            <div className="terr_biaoshi_box">{item.perms}</div>
                            {/* 编辑 */}
                            <span className="iconfont caozuo" onClick={() => handleChange(item)} >&#xe6c3;</span>
                            {/* 删除 */}
                            <span className="iconfont caozuo" onClick={() => handleDelete(item)}>&#xe712;</span>
                        </TreeTitleBox>
                        {/* 带动画效果 需要优化
                            export const TreeUlBox = styled.div<{
                                showDonghua?: boolean;
                                shijian: number;
                            }>`    
                                    height: ${(props) => (props.showDonghua ? (props.shijian * 4.4) + 'rem'  : '0')}; // 控制内容区域的最大高度
                                    overflow: hidden;
                                    transition: height 1s linear;
                            `
                        */}
                        {/* <TreeUlBox showDonghua={item.show} shijian = {item.children.length} >
                            {
                                item.children && item.children.length > 0 && handleXunhuanHTML(item.children, level)
                            }
                        </TreeUlBox> */}
                        <TreeUlBox>
                            {
                                item.show && item.children && item.children.length > 0 && handleXunhuanHTML(item.children, level)
                            }
                        </TreeUlBox>

                    </TreeFZItemBox>)
                }
            </>
        }
        return <TreeFZBox>
            {
                handleXunhuanHTML(treeData)
            }
            <AddChangeModule
                open={addChangeShow}
                selectTreeList={selectTreeList}
                onClose={() => handleAddChangeModuleClose()}
                shangjiId={shangjiId}
                changeData={changeData}
            />
            <PitModal message={'确定删除该菜单吗？'} open={deleteMoudleShow} type='delete' onClose={handleDeleteCallback} />
        </TreeFZBox>
    }

export default TreeFZ;